<template>
	<view class="main">
		<view v-if="userInfo.currentVersion == 1 || !userInfo ">
			<view class="mtop">
				<img class="mtopbg"
					src="https://www.ysrs.xyz/apiI/ll/file/preview/1744005796537ff80808195d597d901960ed892b90024.jpg" alt="" />
				<view class="mtopt">
					<img class="mtopti"
						src="https://www.ysrs.xyz/apiI/ll/file/preview/1744007444236ff80808195d597d901960ef1b70c0026.png" alt="" />
					<view class="mtoptt">沁水县人民医院</view>
				</view>

				<view class="searchV">
					<uv-search v-model="searchValue" :showAction="true" :height='40' bgColor='#fff' placeholder="搜索医生、科室、疾病"
						actionText="搜索" :animation="true"></uv-search>
				</view>

				<view class="mtops">
					<view class="mtopsi" @click="openPath('/pages/AppointmentRegistration/AppointmentRegistration?type=1')">
						<img class="mtopsib"
							src="https://www.ysrs.xyz/apiI/ll/file/preview/1744007893349ff80808195d597d901960ef891650027.jpg"
							alt="" />
						<view class="mtopsic">
							<view class="mtopsict">约挂号</view>
							<view class="mtopsicr">预约挂号</view>
							<img class="mtopsicb"
								src="https://www.ysrs.xyz/apiI/ll/file/preview/1743073564874ff80808195d597d90195d747d8ca000e.png"
								alt="" />
						</view>
					</view>
					<view class="mtopsi" @click="openPath('/pages/Reportnquiry/Reportnquiry')">
						<img class="mtopsib"
							src="https://www.ysrs.xyz/apiI/ll/file/preview/1744008111817ff80808195d597d901960efbe6c90028.jpg"
							alt="" />
						<view class="mtopsic">
							<view class="mtopsict">查报告</view>
							<view class="mtopsicr">查询报告</view>
							<img class="mtopsicb"
								src="https://www.ysrs.xyz/apiI/ll/file/preview/1743073550785ff80808195d597d90195d747a1c1000d.png"
								alt="" />
						</view>
					</view>
				</view>
			</view>

			<view class="noticV">
				<view class="noticVt">医院公告</view>
				<uv-notice-bar mode="link" :text="notictext" direction="column" color="#000" bgColor='#fff'></uv-notice-bar>
			</view>

			<view class="menusV">
				<!-- 		<view class="menusVt">
					<view class="menusVti menusVtiA">常用服务</view>
				</view> -->
				<view class="menusVc">
					<view class="menusVi" v-for="(i,o) in menusList" :key="o" @click="openPath(i.path)">
						<!-- :style="{'background':`linear-gradient(45deg,${i.color}22,${i.color}66)`}"> -->
						<img :src="i.icon" :style="{width:i.width,height:i.height}" />
						<view class="menusVic">
							<view class="menusVict">{{i.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info" @click="openH">
				<view class="infol">二甲</view>
				<view class="infoc">沁水县人民医院</view>
				<view class="infor">医院介绍 > </view>
			</view>
			<view class="swiperV">
				<uv-swiper :list="venueInfo" indicator indicatorMode="line" circular height="374rpx" radius="0"></uv-swiper>
			</view>
		</view>

		<view v-else>
			<view class="mtop">
				<img class="mtopbg"
					src="https://www.ysrs.xyz/apiI/ll/file/preview/1744005796537ff80808195d597d901960ed892b90024.jpg" alt="" />
				<view class="mtopt">
					<img class="mtopti"
						src="https://www.ysrs.xyz/apiI/ll/file/preview/1744007444236ff80808195d597d901960ef1b70c0026.png" alt="" />
					<view class="mtoptt">沁水县人民医院</view>
				</view>
			</view>
			<view class="swiperV swiperVd">
				<uv-swiper :list="venueInfo" indicator indicatorMode="line" circular height="374rpx" radius="0"></uv-swiper>
			</view>
			<view class="info" @click="openH">
				<view class="infol">二甲</view>
				<view class="infoc">沁水县人民医院</view>
				<view class="infor">医院介绍 > </view>
			</view>
			<view class="menusV">
				<view class="menusVt">
					<view class="menusVti menusVtiA">常用服务</view>
				</view>
				<view class="menusVc">
					<view class="menusVi" v-for="(i,o) in menusListDoc" :key="o" @click="openPath(i.path)">
						<!-- :style="{'background':`linear-gradient(45deg,${i.color}22,${i.color}66)`}"> -->
						<img :src="i.icon" :style="{width:i.width,height:i.height}" />
						<view class="menusVic">
							<view class="menusVict">{{i.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="hotV" v-if="userInfo.currentVersion == 1 || !userInfo ">
			<view class="hotVt">
				<view class="hotVtc">热门科室</view>
				<view class="hotVtr" @click="openPath('/pages/AppointmentRegistration/AppointmentRegistration?type=1')">更多科室 >
				</view>
			</view>
			<view class="hotVc">
				<view class="hotVci" v-for="(i,o) in deptList" :key="o" @click="openChooseDoctor(i.id)">
					<img :src="i.icon" />
					<view class="hotVcit">{{i.name}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				deptList: [{
						name: '妇科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970186197ff80808195d597d901964853fdd50068.png'
					},
					{
						name: '产科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970176985ff80808195d597d901964853d9d90067.png'
					},
					{
						name: '儿科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970166379ff80808195d597d901964853b06b0066.png'
					},
					{
						name: '骨科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970156223ff80808195d597d90196485388bf0065.png'
					},
					{
						name: '肿瘤科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970146549ff80808195d597d90196485362f50064.png'
					},
					{
						name: '内科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970137964ff80808195d597d901964853416c0063.png'
					},
					{
						name: '外科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970129618ff80808195d597d90196485320d20062.png'
					},
					{
						name: '药剂科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970121717ff80808195d597d90196485301f50061.png'
					},
					{
						name: '感染科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970111150ff80808195d597d901964852d8ae0060.png'
					},
					{
						name: '病理科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970102611ff80808195d597d901964852b753005f.png'
					},
					{
						name: '口腔科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970089025ff80808195d597d9019648528241005e.png'
					},
					{
						name: '精神科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970080816ff80808195d597d9019648526230005d.png'
					},
					{
						name: '麻醉科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970071744ff80808195d597d9019648523ec0005c.png'
					},
					{
						name: '重症医学科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970064296ff80808195d597d90196485221a8005b.png'
					},
					{
						name: '全科医疗科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970055392ff80808195d597d901964851fee0005a.png'
					},
					{
						name: '皮肤科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970043756ff80808195d597d901964851d16c0059.png'
					},
					{
						name: '耳鼻喉科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970035053ff80808195d597d901964851af6d0058.png'
					},
					{
						name: '急诊',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970025547ff80808195d597d9019648518a4b0057.png'
					},
					{
						name: '影像科',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970006413ff80808195d597d9019648513f8d0055.png'
					},
					{
						name: '护理门诊',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744970015589ff80808195d597d90196485163650056.png'
					},
				],
				notictext: ['系统通知系统通知1', '系统通知系统通知2', '系统通知系统通知3'],
				venueInfo: [
					"https://www.ysrs.xyz/apiI/ll/file/preview/1743073096623ff80808195d597d90195d740b3af0001.jpg",
				],
				searchValue: '',
				menusList: [{
						name: '添加就诊人',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744012230020ff80808195d597d901960f3abd840029.png',
						color: '#FFCCCC',
						width: '70rpx',
						height: '70rpx',
						path: '/pages/AddPatient/AddPatient'
					},
					{
						name: '电子病历',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963276523ff80808195d597d9019647ea8eeb0032.png',
						color: '#FFCCCC',
						width: '70rpx',
						height: '70rpx',
						path: '/pages/ElectronicMedicalRecord/ElectronicMedicalRecord'
					},
					{
						name: '在线问诊',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073467397ff80808195d597d90195d7465c05000a.png',
						color: '#d7d5ff',
						width: '80rpx',
						height: '80rpx',
						path: '/pages/AppointmentRegistration/AppointmentRegistration?type=2'
					},
					{
						name: '挂号记录',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963536466ff80808195d597d9019647ee86520035.png',
						width: '75rpx',
						height: '75rpx',
						path: '/pages/personal/registrationRecoed',
					},
					{
						name: '在线缴费',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963411387ff80808195d597d9019647ec9dbb0033.png',
						color: '#CCFFCC',
						width: '75rpx',
						height: '75rpx',
						path: '/pages/OnlinePayment/OnlinePayment'
					},
					{
						name: '费用明细',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963508201ff80808195d597d9019647ee17e90034.png',
						width: '75rpx',
						height: '75rpx',
						path: '/pages/Order/Order'
					},
					{
						name: '智慧食堂',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963567971ff80808195d597d9019647ef01630036.png',
						color: '#b2eeb2',
						width: '70rpx',
						height: '70rpx',
						path: '/pages/Canteen/Canteen'
					},
					{
						name: 'AI问诊',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963625461ff80808195d597d9019647efe1f50037.png',
						color: '#FFCC99',
						width: '80rpx',
						height: '80rpx',
						path: '/pages/AiConsultation/AiConsultation'
					},
					{
						name: '导诊',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963638354ff80808195d597d9019647f014520038.png',
						color: '#FFCCCC',
						width: '75rpx',
						height: '75rpx',
						path: '/pages/HospitalizationGuidance/HospitalizationGuidance'
					},
					{
						name: '科室导航',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963684476ff80808195d597d9019647f0c87c0039.png',
						color: '#afeaea',
						width: '75rpx',
						height: '75rpx',
						path: '/pages/DepartmentNavigation/DepartmentNavigation'
					},
					{
						name: '健康咨询',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1744963726765ff80808195d597d9019647f16dad003a.png',
						color: '#b2eeb2',
						width: '75rpx',
						height: '75rpx',
						path: '/pages/HealthCounseling/HealthCounseling'
					},
				],
				menusListDoc: [{
						name: '科室管理',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743427619832ff80808195d597d90195ec624bf8001e.png',
						color: '#FFFFCC',
						path: '/pages/Doctor/Department'
					},
					{
						name: '医生管理',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743427633563ff80808195d597d90195ec62819c001f.png',
						color: '#CCFFFF',
						path: '/pages/Doctor/Doctor'
					},
					{
						name: '排班管理',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743427743476ff80808195d597d90195ec642ef40023.png',
						color: '#FFCCCC',
						path: '/pages/Doctor/Scheduling/Scheduling'
					},
					{
						name: '患者管理',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743427671491ff80808195d597d90195ec6315c30022.png',
						color: '#FFCCCC',
						path: '/pages/Doctor/Patient'
					},
					{
						name: '病人管理',
						icon: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743427660814ff80808195d597d90195ec62ec0e0021.png',
						color: '#d7d5ff',
						path: '/pages/Doctor/Hospitalized'
					},
				],
				userInfo: {},
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo') || null
			if (this.userInfo.id) {
				uni.setTabBarBadge({ //显示数字
					index: 2, //tabbar下标
					text: '16' //数字
				})
			}
			console.log(this.userInfo)
		},
		mounted() {},
		methods: {
			openChooseDoctor(id) {
				uni.navigateTo({
					url: `/pages/AppointmentRegistration/chooseDoctor?type=1&id=${id}`
				})
			},
			openH() {
				uni.navigateTo({
					url: '/pages/index/info'
				})
			},
			openPath(path) {
				const userInfo = uni.getStorageSync('userInfo') || null
				if (!userInfo) {
					uni.showToast({
						title: '请登录！',
						duration: 1000,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/personal/login'
						})
					}, 1000)
					return;
				} else {
					uni.navigateTo({
						url: path
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F5F5F5;
		min-height: 100vh;
		background: linear-gradient(to bottom, #2c9b9433, #2c9b9411);
		padding-bottom: 40rpx;

		.mtop {
			width: 100%;
			height: 480rpx;
			position: relative;
			z-index: 2;

			.mtopbg {
				position: absolute;
				top: 0%;
				left: 0;
				z-index: 1;
				opacity: .2;
				width: 100%;
				height: 100%;
			}

			.mtopt {
				position: relative;
				z-index: 3;
				display: flex;
				top: 100rpx;
				left: 30rpx;

				.mtopti {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}

				.mtoptt {
					font-size: 35rpx;
					position: relative;
					color: #555;
					top: 10rpx;
				}
			}

			.searchV {
				display: flex;
				top: 120rpx;
				left: 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 720rpx;
				height: 60rpx;
				// padding: 0 30rpx;
				// box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 16rpx;
				margin: 10rpx auto;
				position: relative;
				z-index: 9;
				// background-color: #fff;
			}

			.mtops {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.mtopsi {
					position: relative;
					z-index: 9;
					width: 280rpx;
					height: 160rpx;
					border-radius: 22rpx;
					overflow: hidden;
					padding: 20rpx 30rpx;
					top: 140rpx;
					background-color: #35bececc;

					&:last-of-type {
						background-color: #4395edcc;
					}

					.mtopsib {
						position: absolute;
						left: 0;
						top: 0%;
						width: 100%;
						height: 100%;
						opacity: .1;
						z-index: 2;
					}

					.mtopsic {
						position: relative;
						z-index: 3;
						text-shadow: 0 0 3rpx #000;

						.mtopsict {
							color: #fff;
							font-size: 45rpx;
							margin-bottom: 20rpx;
						}

						.mtopsicr {
							color: #eee;
							font-size: 38rpx;
						}

						.mtopsicb {
							position: absolute;
							right: -30rpx;
							bottom: -50rpx;
							height: 120rpx;
							width: 120rpx;
							z-index: 6;
							opacity: .6;
						}
					}
				}
			}

		}

		.info {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			width: 100%;
			margin: 30rpx 0;

			.infol {
				background-color: #fe7102;
				width: 80rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 8rpx;
				font-size: 22rpx;
				color: #fff;
			}

			.infoc {
				font-size: 35rpx;
				margin: 0 200rpx 0 30rpx;
			}

			.infor {
				font-size: 28rpx;
				color: #409EFF;
			}
		}

		.noticV {
			display: flex;
			align-items: center;
			height: 80rpx;
			margin: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			.noticVt {
				color: #2c9b94;
				font-weight: bolder;
				font-style: italic;
				font-size: 31rpx;
				font-family: '黑体';
			}
		}

		.menusV {
			width: 660rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
			margin: 25rpx auto 0;
			border-radius: 16rpx;

			.menusVt {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.menusVti {
					width: 300rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
					font-size: 34rpx;
					margin-bottom: 10rpx;
				}

				.menusVtiA {
					background-image: url(https://www.ysrs.xyz/apiI/ll/file/preview/1744013163839ff80808195d597d901960f48fd3f002a.png);
					background-size: 100% 100%;
				}
			}

			.menusVc {
				display: flex;
				flex-wrap: wrap;

				.menusVi {
					width: 140rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 20rpx 0;
					margin-right: 30rpx;

					&:nth-of-type(4n) {
						margin-right: 0;
					}

					img {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 10rpx;
						opacity: .8;
					}

					.menusVic {
						text-shadow: 0 0 6rpx #ccc;

						.menusVict {
							color: #333;
							font-size: 26rpx;
						}
					}

					.menusVicMore {
						width: 100%;

						.menusVict {
							margin-left: 30rpx;
							color: #fff;
							text-shadow: 0 0 8rpx #333;

							&:last-of-type {
								margin: 0;
								margin-right: 30rpx;
								text-align: right;
							}
						}
					}
				}

			}

		}

		.swiperV {
			width: 720rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin: 30rpx auto;
		}

		.swiperVd {
			margin-top: -230rpx;
		}

		.hotV {
			margin: 20rpx;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.hotVt {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.hotVtc {
					font-size: 33rpx;
					font-weight: bold;
				}

				.hotVtr {
					color: #999;
					font-size: 28rpx;
				}
			}

			.hotVc {
				display: flex;
				flex-wrap: wrap;

				.hotVci {
					width: 25%;
					padding: 20rpx 0 10rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					border-right: 1px solid #eee;

					&:nth-of-type(4n) {
						border-right: 0;
					}

					&:nth-of-type(17),
					&:nth-of-type(18),
					&:nth-of-type(19),
					&:nth-of-type(20) {
						border-bottom: 0;
					}

					img {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					.hotVcit {
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
		}

	}
</style>